<template>
  <div class="page-main polyQuery">
    <CustomForm
      :formInline="form"
      @onSubmit="onSubmit"
      @resetTable="resetTable"
      :labelWidth="`120px`"
    >
      <el-form-item label="查询数据">
        <el-input v-model="form.query" placeholder="输入手机号或车牌号"></el-input>
      </el-form-item>
    </CustomForm>
    <!-- <el-button type="primary" @click="addGoodsEvt" style="margin-bottom: 5px;">添加货物</el-button> -->
    <!-- <CustomDescriptions :data="descriptionsData" :styleBox="{}"></CustomDescriptions> -->
    <div class="area">
      <ResultPanel v-if="!showCarTable" :polyInfo="polyInfo" />
      <el-table
        v-if="showCarTable"
        border
        :data="carTableList"
        style="width: 100%"
        height="600"
        align="center"
        v-loading="tableLoading"
      >
        <el-table-column prop="add_id" label="运单ID" align="center">
          <template slot-scope="scope">{{scope.row.add_id + '-' + scope.row.yund_id }}</template>
        </el-table-column>
        <el-table-column prop="user_name" label="司机名" align="center"></el-table-column>
        <el-table-column prop="cph" label="车牌号" align="center"></el-table-column>
        <el-table-column prop="tel" label="手机号" align="center"></el-table-column>
        <el-table-column prop="area" label="所属地区" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.area == 0">安阳总公司</span>
            <span v-if="scope.row.area == 2">安徽分公司</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="bill_status"
          label="运单状态"
          width="240"
          align="center"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">{{statusMap.bill[scope.row.bill_status] }}</template>
        </el-table-column>
        <el-table-column prop="address" label="操作" align="center" width="260">
          <template slot-scope="scope">
            <el-button v-if="scope.row.tel" size="mini" type="primary" @click="checkDetail(scope.row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog title="聚合信息" top="5vh" :visible.sync="dialogVisible" width="90%" :close-on-click-modal="false">
      <ResultPanel :polyInfo="polyInfo" />
    </el-dialog>
  </div>
</template>

<script>
import { aggregateQuery, getCarNumberList } from "@/api/childCompany/index";
import ResultPanel from "./components/ResultPanel";
import { isValidPhoneNumber } from "@/utils/validate";
export default {
  name: "polyQuery",
  components: {
    ResultPanel
  },
  data() {
    return {
      polyInfo: null,
      dialogVisible: false,
      form: {
        // query: "15100003358",
        // query: "豫EF5115",
        query: "",
      },
      showCarTable: false,
      carTableList: [],
      descriptionsData: [
        {
          label: "运输公司总数",
          count: 0,
          unit: "(家)"
        },
        {
          label: "有效运输许可证数",
          count: 0,
          unit: "(家)"
        }
      ],
      tableLoading: false,
      statusMap: {
        bill: {
          0: "待提货",
          1: "拒绝",
          2: "确认",
          3: "运输中",
          4: "完成",
          5: "待结算",
          6: "结算",
          7: "结算失败"
        },
        car: {
          "-1": "未提交",
          0: "待审核",
          1: "同意",
          2: "拒绝",
          3: "证件过期"
        },
        driver: {
          "-1": "未提交",
          0: "待审核",
          1: "同意",
          2: "拒绝",
          3: "证件过期"
        },
        nhk: {
          0: "未设置银行卡",
          1: "已设置银行卡"
        }
      }
    };
  },
  mounted() {
    this.onSubmit();
  },
  methods: {
    //查看详情
    async checkDetail(row) {
      //通过手机查询然后弹框显示
      let result = await aggregateQuery({
        query: row.tel
      });
      if (result.code == 200) {
        this.dialogVisible = true;
        this.polyInfo = result.data;
      }
    },
    async initial(type = "phone") {
      if (type == "phone") {
        this.showCarTable = false;
        let result = await aggregateQuery(this.form);
        console.log("手机号查询", result);
        if (result.code == 200) {
          // if(result.data.bill.length == 0 && result.data.car.car_status == '-1' && result.data.driver.driver_status == '-1'){
          //   //没查询到
          //   this.$message.error("未查询到信息!");
          // }else{
            
          // }
          this.polyInfo = result.data;
        }
      } else {
        this.showCarTable = true;
        this.tableLoading = true;
        let result = await getCarNumberList(this.form);
        this.tableLoading = false;
        if (result.code == 200) {
          this.carTableList = result.data;
        }else{
          this.showCarTable = false;
        }
        console.log("车辆查询", result);
      }
    },

    onSubmit() {
      if (!this.form.query) {
        this.polyInfo = null;
        return;
      };
      // this.form.page = 1;
      this.initial(isValidPhoneNumber(this.form.query) ? "phone" : "car");
    },
    resetTable() {
      this.form = {
        query: ""
        // page: 1,
        // pageSize: 10
      };
      this.showCarTable = false;
      this.carTableList = [];
      this.polyInfo = null;
      // this.initial();
    },
    handleSizeChange(pageSize) {
      this.form.pageSize = pageSize;
      this.initial();
    },
    handleCurrentChange(page) {
      this.form.page = page;
      this.initial();
    }
  }
};
</script>

<style lang="scss" scoped>
.polyQuery {
  .area {
  }
}
</style>
